<template>
	<view>
		<cu-custom bgColor="bg-rgb" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">新增温度曲线</block>
		</cu-custom>
		<form>
			<view class="cu-form-group animation-slide-bottom" :style="[{animationDelay: 0.1 + 's'}]">
				<view class="title">工作中心</view>
				<input :focus="focus_index == 0" placeholder="请输入工作中心" name="input" v-model="myFormData.workCenter" @confirm="focusNextInput(0)"></input>
			</view>
			<view class="cu-form-group animation-slide-bottom" :style="[{animationDelay: 0.2 + 's'}]">
				<view class="title">制令单号</view>
				<input :focus="focus_index == 1" placeholder="请输入制令单号" name="input" v-model="myFormData.commandBill" @confirm="focusNextInput(1)"></input>
			</view>
			<view class="cu-form-group animation-slide-bottom" :style="[{animationDelay: 0.3 + 's'}]">
				<view class="title">备注</view>
				<input :focus="focus_index == 2" placeholder="请输入备注" name="input" type="text" v-model="myFormData.notes" @confirm="focusNextInput(2)"></input>
			</view>
			<view class="cu-form-group animation-slide-bottom" :style="[{animationDelay: 0.4 + 's'}]">
				<view class="title">开始时间</view>
				<view class="" @click="start">
					{{startString}}
				</view>
			</view>
			<view class="cu-form-group animation-slide-bottom" :style="[{animationDelay: 0.5 + 's'}]">
				<view class="title">结束时间</view>
				<view class="" @click="end">
					{{endString}}
				</view>
			</view>
			<view class="cu-form-group animation-slide-bottom" :style="[{animationDelay: 0.6 + 's'}]">
				<view class="title">温度曲线类型</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input">{{array[index]}}</view>
					</picker>
				</view>
			</view>
			<view class="cu-form-group animation-slide-bottom" :style="[{animationDelay: 0.7 + 's'}]">
				<view class="title">温度曲线文件</view>
				<view class="btn" @click="getImg">上传图片</view>
			</view>
			<view class="cu-form-group" v-show="myFormData.tempGraphfile">
				<image style="width: 300rpx;height: 300rpx;margin: auto;" :src="myFormData.tempGraphfile" mode=""></image>
			</view>
			<view class="padding flex flex-direction animation-slide-bottom" :style="[{animationDelay: 0.9 + 's'}]">
				<button class="cu-btn bg-rgb lg" @click="onSubmit">添加</button>
			</view>
		</form>

		<w-picker :visible.sync="visible" mode="date" startYear="2017" endYear="2229" :value="myFormData.startTime" :current="true"
		 fields="second" @confirm="onConfirm($event,'start')" @cancel="onCancel" :disabled-after="false" ref="date"></w-picker>

		<w-picker :visible.sync="visible1" mode="date" startYear="2017" endYear="2229" :value="myFormData.endTime" :current="true"
		 fields="second" @confirm="onConfirm($event,'end')" @cancel="onCancel" :disabled-after="false" ref="date1"></w-picker>
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue";
	export default {
		components: {
			wPicker
		},
		data() {
			return {
				myFormData: {
					workCenter: '', // 工作中心
					commandBill: '', // 制令单号
					notes: '', // 备注
					startTime: '', //开始时间
					endTime: '', // 结束时间
					tempGraphtype: '', //温度曲线类型
					tempGraphfile: '', // 温度曲线图片
				},
				array: [],
				index: 0,
				startString: '请选择开始时间',
				endString: '请选择结束时间',
				visible: false,
				visible1: false,
				focus_index:-1
			};
		},
		onLoad: function(option) {
			this.getDictItems(); // 获取温度曲线类型
		},
		methods: {
			getDictItems() { // 获取温度曲线类型
				this.$http.get('mesapi/mesapp/getDictItems/temp_graphtype').then(res => {
					if (res.data.success) {
						for (let i = 0; i < res.data.result.length; i++) {
							this.array.push(res.data.result[i].value)
						}
						this.myFormData.tempGraphtype = this.array[this.index]
					} else {
						// this.$tip.error(res.data.message)
            this.modal.show({ type:'error', content:res.data.message })
					}
				})
			},
			bindPickerChange: function(e) { // 温度曲线类型选择
				this.index = e.target.value;
				this.myFormData.tempGraphtype = this.array[e.target.value];
			},
			// 选择温度曲线图片
			getImg(e) {
				var that = this
				uni.chooseImage({
					count: 1, // 最多可以选择的图片张数，默认9
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
					success: function(res) {
						uni.showLoading({
							mask: true,
							title: '添加图片中.....'
						})
						if (res.tempFilePaths.length > 1) {
							uni.hideLoading();
							uni.showToast({
								title: '只允许一张图片',
								duration: 2000
							});
						} else if (res.tempFilePaths.length == 0) {
							uni.hideLoading();
							uni.showToast({
								title: '请选择图片',
								duration: 2000
							});
						} else {
							uni.uploadFile({
								url: that.$http.config.baseUrl + 'sys/common/upload',
								filePath: res.tempFilePaths[0],
								name: 'file',
								header: {
									'X-Access-Token': uni.getStorageSync('Access-Token')
								},
								success: res => {
									uni.hideLoading();
									if (JSON.parse(res.data).success) {
										that.myFormData.tempGraphfile = JSON.parse(res.data).message

									} else {
										uni.showToast({
											title: '上传失败~',
											icon: 'none'
										})
									}
								}
							});
						}
					}
				});
			},
			focusNextInput(index) { // 输入框回车 光标指向下一个
				// var inputs = document.getElementsByTagName("input");
				// if (index == (inputs.length - 1)) {
				// 	return
				// } else {
				// 	inputs[index + 1].focus();
				// }
				if (index == 2) {
					return
				} else {
					this.focus_index = Number(index) + 1
				}
			},
			start() { // 开始时间选择显示
				this.$refs.date.show()
			},
			end() { // 结束时间选择显示
				this.$refs.date1.show()
			},
			onCancel() {},
			onConfirm(e, date) { // 开始 + 结束 时间选择确定
				if (date == 'start') {
					this.startString = e.value
					this.myFormData.startTime = e.value
				} else {
					this.endString = e.value
					this.myFormData.endTime = e.value
				}

			},
			onSubmit() { // 添加提交按钮
				uni.showModal({
					title: '温度曲线',
					content: '是否添加？',
					cancelText: '取消',
					confirmText: '添加',
					success: res => {
						if (res.confirm) {
							uni.showLoading({
								mask: true,
								title: '添加温度曲线中.....'
							})
							if (this.myFormData.workCenter.replace(/\s+/g, "") == '') {
								// this.$tip.error('工作中心不能为空');
								this.modal.show({ type:'error', content:'工作中心不能为空' })
								uni.hideLoading();
								return false
							} else if (this.myFormData.commandBill.replace(/\s+/g, "") == '') {
								// this.$tip.error('制令单号不能为空');
								this.modal.show({ type:'error', content:'制令单号不能为空' })
								uni.hideLoading();
								return false
							} else if (this.myFormData.notes.replace(/\s+/g, "") == '') {
								// this.$tip.error('备注不能为空');
								this.modal.show({ type:'error', content:'备注不能为空' })
								uni.hideLoading();
								return false
							} else if (this.myFormData.startTime.replace(/\s+/g, "") == '') {
								// this.$tip.error('开始时间不能为空');
								this.modal.show({ type:'error', content:'开始时间不能为空' })
								uni.hideLoading();
								return false
							} else if (this.myFormData.endTime.replace(/\s+/g, "") == '') {
								// this.$tip.error('结束时间不能为空');
								this.modal.show({ type:'error', content:'结束时间不能为空' })
								uni.hideLoading();
								return false
							} else if (this.myFormData.tempGraphtype.replace(/\s+/g, "") == '') {
								// this.$tip.error('温度曲线类型不能为空');
								this.modal.show({ type:'error', content:'温度曲线类型不能为空' })
								uni.hideLoading();
								return false
							} else if (this.myFormData.tempGraphfile.replace(/\s+/g, "") == '') {
								// this.$tip.error('温度曲线文件不能为空');
								this.modal.show({ type:'error', content:'温度曲线文件不能为空' })
								uni.hideLoading();
								return false
							}
							let mesTempratureGraph = this.myFormData
							this.$http.post('produce/mesTempratureGraph/add', mesTempratureGraph).then(res => {
								if (res.data.success) {
									uni.hideLoading();
									// this.$tip.success(res.data.message);
									this.modal.show({ type:'success', content:res.data.message })
									setTimeout(function() {
										uni.navigateBack({
											delta: 1
										})
									}, 1000);
								} else {
									// this.$tip.error(res.data.message)
                  this.modal.show({ type:'error', content:res.data.message })
								}
							})
						}
					}
				})

			}
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}

	.btn {
		background-color: rgb(0, 64, 152);
		padding: 10rpx;
		color: white;
		border-radius: 10rpx;
	}

	input {
		text-align: right;
	}
</style>
